<template>
    <div class="container">
        <div class="step_container">
            <el-steps :active="active" align-center>
                <el-step title="步骤1-设置学号区域" description="请设置学号区域">
                </el-step>
                <el-step
                        title="步骤2-设置客观题区域"
                        description="请对每个客观题进行框选"
                ></el-step>
                <el-step
                        title="步骤3-设置主观题区域"
                        description="请对每一个主观题进行框选"
                ></el-step>
            </el-steps>
        </div>
        <div class="view_container">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "parent",
        data() {
            return {
                active: 0
            }
        },
        methods: {
            changeActive(active) {
                this.active = active
            }
        },
        created() {
        },
        watch: {
            '$route.path': {
                immediate: true,
                handler: function (n, o) {
                    let parentIndex = this.$route.meta.parentIndex;
                    if (parentIndex != null) {
                        let updateActiveIndex = this.$parent.updateActiveIndex;
                        if (updateActiveIndex != null) {
                            updateActiveIndex(parentIndex)
                        }
                    }
                    console.log("123", this.$route.meta);
                    if (this.$route.meta.paperIndex != null) {
                        this.active = this.$route.meta.paperIndex
                    }
                }
            }
        }
    }
</script>

<style scoped type="less">
    .container {
        padding: 10px 20px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        .view_container {
            height: calc(100% - 77px);
            width: 100%;
            overflow: auto;
        }
    }

</style>